<style>
    #roleManagement {
        width: 100%;
        min-width: 890px;
        position: relative;
    }

    #roleManagement .demo-table-expand {
        font-size: 0;
    }

    #roleManagement .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    #roleManagement .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 80%;
    }

    #roleManagement .el-table__expand-column .el-table__expand-icon {
        height: 39px;
    }

    #roleManagement .table {
        transition: 1s all;
    }

    #roleManagement .el-carousel__container {
        height: 440px;
    }

    .el-tooltip__popper {
        max-width: 400px;
    }

    .el-step__main {
        max-width: calc(100% - 60px);
    }

    #roleManagement .roleManagementTable {
        width: 95% !important;
        margin: 10px 20px 0;
    }

    #roleManagement .datePicker {
        width: 140px !important;
        height: 24px !important;
        margin-top: 29px;
        margin-right: 18px;
        float: left;
    }

    #roleManagement .datePicker .el-input__inner {
        border-radius: 2px !important;
        height: 24px !important;
    }

    #roleManagement .add {
        background: url("/static/images/add.png") no-repeat center;
    }

    #roleManagement .del {
        background: url("/static/images/del.png") no-repeat center;
    }

    #roleManagement .search {
        background: url("/static/images/search.png") no-repeat center;
    }

    #roleManagement .sel {
        background: url("/static/images/sel.png") no-repeat center;
    }

    #roleManagement .icon {
        float: left;
    }

    #roleManagement .btn span {
        float: left;
        margin-top: 4px;
        margin-left: 2px;
    }

    #roleManagement .btn {
        height: 24px;
        line-height: 1;
        border: none;
        background: #f8fafb;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        float: left;
        font-size: 14px;
        color: #1f2d3d;
        margin-top: 29px;
        margin-right: 16px;
    }

    #roleManagement .btn-print {
        margin-right: 0;
    }

    #roleManagement .btn:hover {
        color: #5468ee;
    }

    #roleManagement .inner {
        margin: 0 20px;
    }

    #roleManagement .btn-nav {
        height: 60px;
        overflow: hidden;
    }

    #roleManagement .btn-nav .el-input .el-input__inner {
        height: 24px;
    }

    #roleManagement .btn-nav .el-input {
        float: left;
        margin-top: 29px;
        margin-right: 18px;
        width: 140px;
        height: 24px;
    }

    #roleManagement h4 {
        padding-left: 20px;
        margin-bottom: 0px;
    }

    #roleManagement .formBottom {
        margin-top: 10px;
    }

    #roleManagement .roleManagementCombinationDetails .el-date-editor.el-input {
        width: 100%;
    }

    #roleManagement .roleManagementCombinationDetails {
        margin-top: 30px;
    }
</style>
<style>
    .steps {
        position: absolute;
        bottom: 10px;
        left: 30px;
        margin: auto;
    }

    .el-dialog__headerbtn {
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .el-step__main {
        margin-left: -8px !important;
    }
</style>
<style>
    .el-date-editor.el-input {
        width: 100%;
    }
</style>
<div id="roleManagement">
    <!--页面调整-->
    <el-row
            v-loading="showLoading"
            element-loading-text="拼命加载中">
        <div class="inner btn-nav">
            <el-input
                    v-model="rrName"
                    icon="search"
                    placeholder="角色名称"></el-input>
            <button @click="newInput" class="btn btn-add"><i
                    class="icon add"></i><span>新增</span>
            </button>
            <button @click="multiSelectClick" class="btn btn-multiSelect"><i
                    class="icon sel"></i><span>多选</span>
            </button>
            <button
                    class="btn"
                    v-show="multiSelect"
                    @click="multiEdit">编辑
            </button>
            <button
                    class="btn"
                    v-show="multiSelect"
                    @click="multiStart">启用
            </button>
            <button
                    class="btn"
                    v-show="multiSelect"
                    @click="multiDisable">禁用
            </button>
            <button
                    class="btn"
                    v-show="multiSelect"
                    @click="multiWarehouse">配置仓库
            </button>
            <button
                    class="btn"
                    v-show="multiSelect"
                    @click="multiCustomer">配置客户
            </button>
            <button
                    class="btn"
                    v-show="multiSelect"
                    @click="multiMenu">配置菜单
            </button>
        </div>
        <!--主页面的字段-->
        <el-table
                :data="roleManagement"
                :max-height="config_table_height()"
                ref="table"
                class="roleManagementTable"
                @selection-change="multiSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="expand">
                <template scope="props">
                    <el-row>
                        <el-col :span="10">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="角色名称">
                                    <span>{{ props.row.rrName        }}</span>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <span>
                                        <el-icon name="time"></el-icon>
                                        {{ auto_time_new(props.row.rrCjsj,6) }}
                                    </span>
                                </el-form-item>
                                <el-form-item label="角色备注">
                                    <el-tooltip class="item" effect="dark"
                                                :content="props.row.rrRemarks"
                                                placement="top">
                                        <span class="remark">{{ props.row.rrRemarks }}</span>
                                    </el-tooltip>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="14">
                            <el-form label-position="left" inline class="demo-table-expand">

                                <el-form-item label="状态">
                                    <el-tag-s :val="auto_el_tag('rrStatus',props.row.rrStatus)"></el-tag-s>
                                </el-form-item>
                                <el-form-item label="可用操作">
                                    <el-button
                                            size="small"
                                            icon="edit"
                                            @click="inlineEdit       (props.$index, props.row)">
                                    </el-button>
                                    <el-button
                                            size="small"
                                            v-show="props.row.rrStatus==0"
                                            type="success"
                                            @click="inlineAble           (props.$index, props.row)">启用
                                    </el-button>
                                    <el-button
                                            size="small"
                                            type="danger"
                                            v-show="props.row.rrStatus!=0"
                                            @click="inlineDisAble         (props.$index, props.row)">禁用
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色名称"
                    align="center">
                <template scope="scope">
                    <span>{{ scope.row.rrName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    show-overflow-tooltip
                    align="center">
                <template scope="scope">
                    <span>{{ scope.row.rrRemarks}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    align="center">
                <template scope="scope">
                    <span>{{ auto_time_new(scope.row.rrCjsj)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否启用"
                    align="center">
                <template scope="scope">
                    <!--<el-tag-->
                            <!--:type="scope.row.rrStatus == 0 ? 'danger':'success'"-->
                            <!--close-transition>{{scope.row.rrStatus == 0 ? '禁用':'启用'}}-->
                    <!--</el-tag>-->
                    <el-tag-s :val="auto_el_tag('rrStatus',scope.row.rrStatus)"></el-tag-s>
                </template>
            </el-table-column>
            <el-table-column
                    v-if="multiSelect"
                    type="selection"
                    width="60">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20, 100, 500, 1000, 5000, 10000]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="currentTotal">
            </el-pagination>
        </div>
    </el-row>
    <el-dialog
            v-model="dialogFormVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">{{form.title}}</span>
        </div>
        <el-form :model="form" ref="newForm">
            <el-carousel
                    ref="carousel"
                    :autoplay="false"
                    arrow="never"
                    indicator-position="none"
                    height="55vh">
                <el-carousel-item>
                    <el-row>
                        <h3>基础信息</h3>
                        <el-form-item
                                label="角色名称"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.rrName       "
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="备注"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.rrRemarks              "
                                    auto-complete="off"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <h3>配置仓库</h3>
                        <el-checkbox-group v-model="form.arehouseIds">
                            <el-checkbox :label="city.baName" :value="city.baArehouseId"
                                         v-for="city in arehouseManagement"></el-checkbox>
                        </el-checkbox-group>
                    </el-row>
                    <el-row>
                        <h3>配置客户</h3>
                        <el-radio v-for="city in clientManagement" v-model="form.bcClientId" :label="city.bcClientId">
                            {{city.bcCname}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <h3>是否启用</h3>
                        <el-radio class="radio" v-model="form.rrStatus" :label="1">是</el-radio>
                        <el-radio class="radio" v-model="form.rrStatus" :label="0">否</el-radio>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                    <h3>配置菜单权限</h3>
                    <el-row>
                        <el-col :span="24"
                                style="overflow: auto; max-height:500px">
                            <el-tree
                                    ref="dataBaseMenu"
                                    :data="dataBaseMenu"
                                    node-key="id"
                                    :show-checkbox="true"
                                    accordion
                                    :render-content="renderContent">
                            </el-tree>
                        </el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="prev" v-show="dialogFormActive">上一步</el-button>
            <el-button type="primary" @click="next" v-show="dialogFormActive < 1">下一步</el-button>
            <el-button type="primary" @click="submit" :loading="submitLoading" v-show="dialogFormActive >= 1">保存
            </el-button>
        </div>
    </el-dialog>
    <el-dialog
            v-model="dialogFormVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">{{form.title}}</span>
        </div>
        <el-form :model="form" ref="newForm">
            <el-carousel
                    ref="carousel"
                    :autoplay="false"
                    arrow="never"
                    indicator-position="none"
                    height="55vh">
                <el-carousel-item>
                    <el-row>
                        <h3>基础信息</h3>
                        <el-form-item
                                label="角色名称"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.rrName       "
                                    auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item
                                label="备注"
                                :label-width="formLabelWidth">
                            <el-input
                                    v-model.number="form.rrRemarks              "
                                    auto-complete="off"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <h3>配置仓库</h3>
                        <el-checkbox-group v-model="form.arehouseIds">
                            <el-checkbox :label="city.baName" :value="city.baArehouseId"
                                         v-for="city in arehouseManagement"></el-checkbox>
                        </el-checkbox-group>
                    </el-row>
                    <el-row>
                        <h3>配置客户</h3>
                        <el-radio v-for="city in clientManagement" v-model="form.bcClientId" :label="city.bcClientId">
                            {{city.bcCname}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <h3>是否启用</h3>
                        <el-radio class="radio" v-model="form.rrStatus" :label="1">是</el-radio>
                        <el-radio class="radio" v-model="form.rrStatus" :label="0">否</el-radio>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                    <h3>配置菜单权限</h3>
                    <el-row>
                        <el-col :span="24"
                                style="overflow: auto; max-height:500px">
                            <el-tree
                                    ref="dataBaseMenu"
                                    :data="dataBaseMenu"
                                    node-key="id"
                                    show-checkbox
                                    accordion
                                    :expand-on-click-node="true"
                                    :render-content="renderContent">
                            </el-tree>
                        </el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="prev" v-show="dialogFormActive">上一步</el-button>
            <el-button type="primary" @click="next" v-show="dialogFormActive < 1">下一步</el-button>
            <el-button type="primary" @click="submit" :loading="submitLoading" v-show="dialogFormActive >= 1">保存
            </el-button>
        </div>
    </el-dialog>
</div>

<script>
    var roleManagement = new Vue({
        el: '#roleManagement',
        prop: {},
        data: function () {
            return {
                roleManagement: [],              //主页面 信息集合
                multipleSelection: [],           //主页面 多选集合
                multiSelect: false,              //主页面 多选状态 维护

                rrName: '',                      //主页面 角色名称 搜索
                showLoading: false,              //主页面 加载 维护

                currentPage: 1,                  //分页 当前页
                currentTotal: 1,                 //分页 总页数
                pageSize: 10,                    //分页 分页大小

                formLabelWidth: '120px',         //表单 配置

                form: form(),                    //新建 弹出层 信息集合
                dialogFormActive: 0,             //新建 弹出层 steps 当前进度
                dialogFormVisible: false,        //新建 弹出层 是否可见
                submitLoading: false,            //新建 弹出层 提交等待

                dialogRoleVisible: false,        //角色 弹出层 是否可见
                arehouseManagement: [],          //仓库 集合
                clientManagement: [],            //客户 集合

                dataBaseMenu: [],                //菜单
                renderContent: function (h, obj) {
                    var node = obj.node;
                    var data = obj.data;
                    var store = obj.store;

                    return h(
                        'span', {},
                        [
                            h('span', {
                                'class': {
                                    'treeHead': typeof data.children !== 'undefined',
                                    'treeChildren': typeof data.children === 'undefined'
                                }
                            }, data.label || data.head),
                            h('span', {
                                style: {
                                    'float': 'right',
                                    'margin-right': '20px'
                                }
                            }, [h('button', {
                                style: {
                                    display: 'none'
                                },
                                on: {
                                    click: function (e) {
                                        appendMenu(store, data);
                                        e.stopPropagation();
                                    }
                                },
                                'class': {
                                    'el-button': true,
                                    'el-button--mini': true,
                                    'addHidden': typeof data.children === 'undefined'
                                }
                            }, '添加'), h('button', {
                                style: {
                                    display: 'none'
                                },
                                on: {
                                    click: function (e) {
                                        removeMenu(store, data);
                                        e.stopPropagation();
                                    }
                                },
                                'class': {
                                    'el-button': true,
                                    'el-button--danger': true,
                                    'el-button--mini': true
                                }
                            }, '删除')])
                        ]
                    )
                }

            }
        },
        computed: {
            option: function () {
                return {
                    "draw": 1,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "rrName": this.rrName.trim(),
                }
            }
        },
        methods: {
            inlineEdit: function (index, row) {
                var obj = this;
                var step = form();
                allPrposCb(step, function (obj, index) {
                    if (typeof row[index] !== 'undefined') step[index] = row[index];
//                    else console.log(index);
                });
//                allPrposCb(step,function (obj,index) {
//                    console.log(step[index],index);
//                });
//                console.log('-------------------');
//                allPrposCb(row,function (obj,index) {
//                    console.log(row[index],index);
//                });
//                console.log(step);
//                console.log(row);

                postBaseMenu(this, {roleId: step.rrRoleId});

                step.title = '编辑';
                obj.form = step;
                obj.dialogFormVisible = true;
                obj.dialogFormActive = 0;
                Vue.nextTick(function () {
                    obj.$refs.carousel.setActiveItem(0);
                });
            },                                  //行内按钮-编辑
            inlineDelete: function (index, row) {
                var _this = this;
                _this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    remove(row, _this.roleManagement);
                    postDelete(_this, {
                        id: [row.rrRoleId]
                    });
                }).catch(function () {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },                                //行内按钮-删除
            inlineAble: function (index, row) {
                var _this = this;
                _this.$confirm('此操作将启用此用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    p[2].post({ids: [row.rrRoleId]})
                }).catch(function () {
                    _this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },                                  //行内按钮-启用
            inlineDisAble: function (index, row) {
                var obj = this;
                obj.$confirm('此操作将此用户禁用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    p[6].post({ids: [row.rrRoleId]});
                }).catch(function () {
                    obj.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },                               //行内按钮-禁用
            inlineWarehouse: function (index, row) {
                /*<debug>*/
                this.roleForm = {
                    roleId: row.rrRoleId,                        //角色 弹出层 角色ID
                };
                /*</debug>*/
                /*<prod>*/
                postRuRoles(this, row.rrRoleId);
                /*</prod>*/
                this.dialogRoleVisible = !this.dialogRoleVisible;
            },                             //行内按钮-仓库
            inlineCustomer: function (index, row) {
                /*<debug>*/
                this.roleForm = {
                    roleId: row.rrRoleId,                        //角色 弹出层 角色ID
                };
                /*</debug>*/
                /*<prod>*/
                postRuRoles(this, row.rrRoleId);
                /*</prod>*/
                this.dialogRoleVisible = !this.dialogRoleVisible;
            },                              //行内按钮-客户
            inlineMenu: function (index, row) {
                /*<debug>*/
                this.roleForm = {
                    roleId: row.rrRoleId,                        //角色 弹出层 角色ID
                };
                /*</debug>*/
                /*<prod>*/
                postRuRoles(this, row.rrRoleId);
                /*</prod>*/
                this.dialogRoleVisible = !this.dialogRoleVisible;
            },                                  //行内按钮-菜单
            multiSelectClick: function () {
                this.multiSelect = !this.multiSelect;
            },                                      //多选 状态维护
            multiSelectionChange: function (val, row) {
                this.multipleSelection = val;
            },                          //多选 选中控制
            multiBatchDelete: function () {
                this.multiBatchDelete = !this.multiBatchDelete;
            },                                      //多选 批量删除维护
            multiEdit: function () {
                this.multiEdit = !this.multiEdit;
            },                                             //多选 编辑维护
            multiStart: function () {
                var obj = this;
                obj.$confirm('此操作将这些用户设置为启用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var step = [];
                    for (var i = 0; i < obj.multipleSelection.length; i++) {
                        step.push(obj.multipleSelection[i].rrRoleId);
                    }
                    p[2].post( {"ids": step});
                }).catch(function () {
                    obj.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },                                            //多选 配置启用
            multiDisable: function () {
                var obj = this;
                obj.$confirm('此操作将这些用户设置为禁用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var step = [];
                    for (var i = 0; i < obj.multipleSelection.length; i++) {
                        step.push(obj.multipleSelection[i].rrRoleId);
                    }
                    p[6].post({"ids": step});
                }).catch(function () {
                    obj.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },                                          //多选 配置禁用
            multiWarehouse: function () {
                this.multiWarehouse = !this.multiWarehouse;
            },                                        //多选 配置仓库
            multiCustomer: function () {
                this.multiCustomer = !this.multiCustomer;
            },                                         //多选 配置客户
            multiMenu: function () {
                this.multiMenu = !this.multiMenu;
            },                                             //多选 配置菜单
            handleSizeChange: function (val) {
                /*<debug>*/
                console.log('每页' + val + '条');
                /*</debug>*/
                this.pageSize = val;
                p[0].post(this.option);
            },                                   //分页 Size
            handleCurrentChange: function (val) {
                /*<debug>*/
                console.log('当前第' + val + '页');
                /*</debug>*/
                this.currentPage = val;
                p[0].post(this.option);
            },                                //分页 当前页
            newInput: function () {
                var obj = this;

                postBaseMenu(this);
                this.dialogFormVisible = true;
                this.form = form();
                this.dialogFormActive = 0;
                Vue.nextTick(function () {
                    obj.$refs.carousel.setActiveItem(0);
                });
            },                                              //按钮 新建入库单
            prevForm: function () {
                this.formActive--;
                this.$refs.carouselWaiting.prev();
            },                                              //form 前一个
            nextForm: function () {
                this.formActive++;
                this.$refs.carouselWaiting.next();
            },                                              //form 后一个
            submitForm: function () {
                var _this = this;
                this.formActive++;
                this.submitLoading = true;
                //TODO 此处应是ajax请求
                setTimeout(function () {
                    _this.submitLoading = false;
                    _this.$notify({
                        title: '成功',
                        message: '保存成功！',
                        type: 'success'
                    });
                    _this.form = {
                        title: "新建角色",
                        ruUserName: '',
                        ruLoginName: '',
                        ruLoginPassword: '',
                        ruPhone: '',
                        ruZoneNo: '',
                        ruTelephone: '',
                        ruEmail: '',
                        ruSex: 1,
                        ruBirthday: '',
                        ruHomeaddress: '',
                        ruQicq: '',
                        ruUserType: '',
                        ruUserZyq: '',
                        ruIspda: '',
                        ruRemarks: '',
                        ruStatus: 1,
                    };
                    _this.multipleSelection = [];
                    _this.formActive = 0;
                    _this.$refs.carouselWaiting.setActiveItem(0);
                    p[0].post();
                }, 1500);
            },                                            //form 表单提交
            prev: function () {
                this.dialogFormActive--;
                this.$refs.carousel.prev();
            },                                                  //新建 弹出层banner控制 前一个
            next: function () {
                this.dialogFormActive++;
                this.$refs.carousel.next();
            },                                                  //新建 弹出层banner控制 后一个
            submit: function () {
                var _this = this;
                this.dialogFormActive++;
                this.submitLoading = true;
                //TODO 此处应是ajax请求

                var menuData = obj.$refs.dataBaseMenu.getCheckedNodes();
                var ids = [];
                var parIds = [];
                for (var i = 0; i < menuData.length; i++) {
                    ids.push(menuData[i].bmMenuId);
                    if (!addOrDelete(menuData[i].bmParentMenuId || 0, parIds)) parIds.push(menuData[i].bmParentMenuId || 0);
                }

                for (var b = 0; b < parIds.length; b++) {
                    if (parIds[b] === 0)continue;
                    if (!addOrDelete(app.nav[parIds[b] - 1].bmMenuId, ids)) {
                        ids.push(app.nav[parIds[b] - 1].bmMenuId);
                    }
                }
                /*<prod>*/
                if (this.form.title === '新建角色') {
                    postSubmit(this, this.form);
                } else {
                    p[5].post({id: obj.form.rrRoleId, ids: ids}, function (json) {
                        obj.submitLoading = false;
                        obj.dialogFormVisible = false;
                        this.callbackAfter(json);
                    })
//                    postModify(this, this.form);
                }
                /*</prod>*/
                /*<debug>*/
                setTimeout(function () {
                    _this.submitLoading = false;
                    _this.$notify({
                        title: '成功',
                        message: '保存成功！',
                        type: 'success'
                    });
                    _this.dialogFormVisible = false;
                    _this.dialogFormActive = 0;
                    _this.$refs.carousel.setActiveItem(0);
                    p[0].post();
                }, 1500);
                /*</debug>*/
            },                                                //新建 表单提交
            auto_rrStatus:function(value){
                var temp={}
                if(!isNaN(value)){
                    temp={
                        0:'',
                        1:'可用',
                    }
                }else{
                    temp={
                        '':0,
                        '可用':1,
                    }
                }
                return temp[value];
            },                                       //角色状态

        },
        watch: {
            rrName: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post(this.option);
            }
        }
    });
    function form() {
        return {
            rrRoleId: '',
            title: "新建角色",
            rrName: '',
            rrCjsj: '',
            rrStatus: 0,
            rrRemarks: '',

            arehouseIds: [],
            bcClientId: 1,
            menuIds: []
        }
    }                //弹出层 form 模板
    var obj = roleManagement;
    var p = [];
    // 0 角色 分页查询
    p[0] = autoPost({
        urlHock: "../../hock/roleControl/page.json",
        urlProd: "/route/roleManagement/0",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered
        }
    });
    // 2 角色 启用
    p[2] = autoPost({
        urlHock: "../../hock/roleControl/page.json",
        urlProd: "/route/roleManagement/2",
        method: 'GET',
        success: function (json) {
            if (json.status === 20000) {
                post(roleManagement, roleManagement.option);
                obj.$notify({
                    title: '提示',
                    type: 'error',
                    message: obj.$createElement(
                        'p',
                        '启用失败'
                    )
                });
            } else {
                obj.$notify({
                    title: '提示',
                    type: 'success',
                    message: obj.$createElement(
                        'p',
                        '启用成功'
                    )
                });
            }
        }
    });
    // 3 角色 配置仓库
    p[3] = autoPost({
        urlHock: "../../hock/roleControl/.json",
        urlProd: "/role/roleAddArehouses/3",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }

    });
    // 4 角色 配置仓库
    p[4] = autoPost({
        urlHock: "../../hock/roleControl/.json",
        urlProd: "/role/roleAddClients/4",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 5 角色 配置菜单
    p[5] = autoPost({
        urlHock: "../../hock/roleControl/.json",
        urlProd: "/route/roleManagement/5",
        method: 'GET',
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 6 角色 禁用
    p[6] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/6",
        method: 'GET',
        success: function (json) {
            if (json.status === 20000) {
                post(roleManagement, roleManagement.option);
                obj.$notify({
                    title: '提示',
                    type: 'error',
                    message: obj.$createElement(
                        'p',
                        '禁用失败'
                    )
                });
            } else {
                obj.$notify({
                    title: '提示',
                    type: 'success',
                    message: obj.$createElement(
                        'p',
                        '禁用成功'
                    )
                });
            }
        }
    });
    // 7 角色 角色编辑
    p[7] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/7",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 8 角色 角色名称不允许重复的接口
    p[8] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/8",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 9 角色 查询所有仓库
    p[9] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/9",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 10 角色 查询所有客户
    p[10] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/10",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 11 角色 查询指定角色 菜单
    p[11] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/11",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 12 角色 查询指定角色 仓库
    p[12] = autoPost({
        urlHock: "../../hock/roleControl/edit.json",
        urlProd: "/route/roleManagement/12",
        success: function (json) {
            roleManagement.$data.roleManagement = json.data;
            roleManagement.$data.currentTotal = json.recordsFiltered;
        }
    });
    p[0].post(roleManagement.option);
    p[9].post();
    p[10].post();
    function postAdd(obj, option) {
        obj.showLoading = true;
        /*<debug>*/
        url = "../../hock/roleControl/.json";
        /*</debug>*/

        /*<prod>*/
        url = "/route/roleManagement/1";//post
        /*</prod>*/

        $.ajax(url, {
            type: "GET",
            data: option || {
                "draw": 1,                      //* 没有意义
                "pageNum": 1,                   //* 当前页
                "pageSize": 10                  //* 每页大小
            },
            error: function (error) {
                errorTip(obj, error);
            },
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    var ruUserType = {
                        "0": "普通",
                        "1": "堆高车",
                        "2": "高位叉车"
                    };
                    json.data[i].ruUserType = ruUserType[json.data[i].ruUserType];
                }
                roleManagement.$data.roleManagement = json.data;
                roleManagement.$data.currentTotal = json.recordsFiltered;
            },
            complete: function () {
                obj.showLoading = false;
            }
        });
    }             // 1  TODO　新增-启用-配置仓库-配置客户-配置菜单

    function getUserMenu(obj, option) {
        var step = [];
        var nav = [];
        if (!option) {
            nav = app.$data.nav;
            getUserMenuInner();
        } else {
            $.ajax('/route/roleManagement/11', {
                type: "GET",
                data: option,
                success: function (json) {
                    if (json.length !== 0) {
                        nav = generateNode(json);
                    }
                    getUserMenuInner();
                }//TODO 异常问题
            })
        }
        function getUserMenuInner() {
            for (var i = 0; i < nav.length; i++) {
                for (var b = 0; b < nav[i].children.length; b++) {
                    step.push(nav[i].children[b])
                }
            }
            obj.$refs.dataBaseMenu.setCheckedKeys([]);
            Vue.nextTick(function () {
                obj.$refs.dataBaseMenu.setCheckedNodes(step);
            });
        }
    }
    function appendMenu(store, data) {
        store.append({id: id++, label: 'testtest'}, data);
    }
    function removeMenu(store, data) {
        store.remove(data);
    }
    function postBaseMenu(obj, option) {

        /*<debug>*/
        obj.$data.showLoading = true;
        url = "/hock/main/Nav-DB.json";
        $.ajax('/route/roleManagement/11', {
            type: "GET",
            data: option | {
                "draw": 1,                      //* 没有意义
                "pageNum": 1,                   //* 当前页
                "pageSize": 10                  //* 每页大小
            },
            error: function (error) {
                errorTip(obj, error);
            },
            success: function (json) {
                obj.$data.dataBaseMenu = json.data;
                getUserMenu();
            },
            complete: function () {
                obj.$data.showLoading = false;
            }
        });
        /*</debug>*/

        /*<prod>*/
        obj.$data.dataBaseMenu = app.$data.nav;
        getUserMenu(obj, option);
        /*</prod>*/


    }
</script>